<template>
	<view class="address-edit">
		<view class="header">
			<view style="z-index: 1;color: #F9F9F9">
				<tn-button style="width: 35px; height: 35px;font-size: 25px" :plain="true" :border="false"
					@click="handleReturn">
					<text class="tn-icon-left"></text>
				</tn-button>
			</view>

			<view class="page-title">{{type === 'add' ? '新增地址' : '编辑地址'}}</view>
		</view>

		<view class="form-container">
			<view class="form-item">
				<text class="label">姓名</text>
				<tn-input v-model="form.name" placeholder="请输入收货人姓名" />
			</view>

			<view class="form-item">
				<text class="label">手机号</text>
				<tn-input v-model="form.tel" placeholder="请输入手机号" />
			</view>

			<view class="form-item">
				<text class="label">地区</text>
				<view class="region-picker" @click="showRegionPicker">
					<text :class="{'placeholder': !selectedRegion}">
						{{selectedRegion || '请选择地区'}}
					</text>
				</view>
			</view>

			<view class="form-item">
				<text class="label">详细地址</text>
				<tn-input v-model="form.addressDetail" type="textarea" placeholder="请输入详细地址" />
			</view>

			<view class="form-item">
				<text class="label">设为默认</text>
				<switch :checked="form.isDefault" @change="handleDefaultChange" />
			</view>
		</view>

		<tn-button @click="handleSave" backgroundColor="tn-bg-primary" class="save-btn">
			保存
		</tn-button>

		<!-- 地区选择器弹出层 -->
		<tn-picker mode="region" v-model="showPicker" :defaultValue="defaultRegion" @confirm="onRegionConfirm">
		</tn-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 'add',
				showPicker: false,
				defaultRegion: [],
				selectedRegion: '',
				form: {
					id: '',
					name: '',
					tel: '',
					province: '',
					city: '',
					county: '',
					addressDetail: '',
					areaCode: '',
					isDefault: false,
					userId: uni.getStorageSync("userInfo").id
				},
			}
		},
		onLoad(options) {
			this.type = options.type
			if (this.type === 'edit' && options.id) {
				this.getAddressDetail(options.id)
			}
		},
		methods: {
			getAddressDetail(id) {
				uni.request({
					url: this.baseUrl + "/wx/address/detail?id=" + id,
					method: "GET",
					success: (res) => {
						if (res.data.data) {
							this.form = res.data.data
							this.selectedRegion = `${this.form.province} ${this.form.city} ${this.form.county}`
						}
					}
				})
			},

			// 显示地区选择器
			showRegionPicker() {
				this.showPicker = true
			},

			// 修改为确认事件处理
			onRegionConfirm(e) {
				// if(e && e.value && e.value.length === 3) {

					// 更新表单数据
					this.form.province = e.province.label
					this.form.city = e.city.label
					this.form.county = e.area.label
					
					// 更新显示的地区文本
					this.selectedRegion = `${e.province.label} ${e.city.label} ${e.area.label}`
					console.log(this.selectedRegion);
					// 如果有区域代码则更新
					if(e.code && e.code.length === 3) {
						this.form.areaCode = e.code[2]
					}
				// }
				// 关闭选择器
				this.showPicker = false
			},

			handleDefaultChange(e) {
				this.form.isDefault = e.detail.value
			},

			handleSave() {
				// 修改验证逻辑
				const { name, tel, addressDetail } = this.form
				
				if (!name.trim()) {
					uni.showToast({
						title: '请输入姓名',
						icon: 'none'
					})
					return
				}
				
				if (!tel.trim()) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return
				}
				
				if (!/^1[3-9]\d{9}$/.test(tel)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
					return
				}
				
				if (!addressDetail.trim()) {
					uni.showToast({
						title: '请输入详细地址',
						icon: 'none'
					})
					return
				}
				console.log(this.form);
				// 发送保存请求
				uni.request({
					url: this.baseUrl + "/wx/address/save",
					method: "POST",
					data: this.form,
					success: (res) => {
						if (res.data.errno === 0) {
							uni.showToast({
								title: this.type === 'add' ? '添加成功' : '更新成功',
								icon: 'success'
							})
							setTimeout(() => {
								uni.navigateBack()
							}, 1500)
						} else {
							uni.showToast({
								title: res.data.errmsg || '保存失败',
								icon: 'none'
							})
						}
					},
					fail: () => {
						uni.showToast({
							title: '保存失败，请重试',
							icon: 'none'
						})
					}
				})
			},

			handleReturn() {
				uni.navigateBack()
			}
		},
		watch: {
			// 监听地区数据变化
			'form.province': {
				handler(newVal) {
					if(newVal) {
						this.defaultRegion = [this.form.province, this.form.city, this.form.county]
					}
				},
				immediate: true
			}
		}
	}
</script>

<style scoped>
	.address-edit {
		padding: 20px;
	}

	.header {
		display: flex;
		position: relative;
		align-items: center;
		height: 45px;
		margin-bottom: 30px;
	}

	.page-title {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		font-size: 24px;
	}

	.form-container {
		background-color: #fff;
		padding: 20px;
		border-radius: 8px;
	}

	.form-item {
		margin-bottom: 20px;
	}

	.label {
		display: block;
		margin-bottom: 8px;
		font-size: 16px;
		color: #333;
	}

	.region-picker {
		background-color: #f8f8f8;
		padding: 10px;
		border-radius: 4px;
		min-height: 24px;
	}

	.placeholder {
		color: #999;
	}

	.save-btn {
		margin-top: 30px;
		width: 100%;
	}

	.picker-content {
		width: 100%;
		text-align: center;
		padding: 10px;
	}
</style>